<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const fontSize = ref('medium')
const route = useRoute()

// 从 localStorage 读取所有已发布的通知
const allAnnouncements = computed(() => {
  const drafts = JSON.parse(localStorage.getItem('drafts') || '[]')
  return drafts.filter(item => item.status === 'published') // 只显示已发布的
})

// 根据路由参数获取当前公告
const announcement = computed(() => {
  const id = Number(route.params.announcementId)
  return allAnnouncements.value.find(item => item.id === id) || { title: '未找到公告', date: '' }
})

// 附件链接（可根据实际情况调整）
const fileUrl = computed(() => `/files/${announcement.value.title}.docx`)
</script>

<template>
  <div class="announcement-detail-wrapper">
    <div class="announcement-detail-container">
      <h1 class="announcement-title">{{ announcement.title }}</h1>
      <div class="announcement-meta">
        <span class="announcement-date">{{ announcement.date }}</span>
        <div class="font-size-switch">
          <span :class="['font-btn', { active: fontSize === 'large' }]" @click="fontSize = 'large'">大</span>
          <span :class="['font-btn', { active: fontSize === 'medium' }]" @click="fontSize = 'medium'">中</span>
          <span :class="['font-btn', { active: fontSize === 'small' }]" @click="fontSize = 'small'">小</span>
        </div>
      </div>
      <div class="announcement-divider"></div>
      <div
          class="announcement-content"
          :class="fontSize"
          v-html="announcement.content"
      ></div>
      <div class="announcement-divider"></div>
      <div class="announcement-attach">
        <div class="attach-title">
          <div class="attach-title-left">
            <span class="attach-arrow">▶</span>
            <span class="attach-text">相关附件</span>
          </div>
        </div>
        <ul class="attach-list">
          <li>
            <a
                class="attach-file"
                :href="fileUrl"
                target="_blank"
                download
            >
              {{ announcement.title }}.docx
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.announcement-detail-wrapper {
  min-height: 100vh;
  background: radial-gradient(circle at 60% 40%, #b7dce7 0%, #3b83b6 100%);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.announcement-detail-container {
  width: 70vw;
  min-width: 600px;
  max-width: 1200px;
  margin: 60px auto 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 40px 36px 24px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.announcement-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0 0 16px 0;
  letter-spacing: 2px;
}
.announcement-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 16px;
}
.announcement-date {
  color: #888;
  font-size: 1.2rem;
}
.font-size-switch {
  display: flex;
  gap: 8px;
}
.font-btn {
  border: 1.5px dashed #ccc;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 1.1rem;
  color: #888;
  background: #fafbfc;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.font-btn.active {
  color: #222;
  border-color: #888;
  background: #f3f6fa;
  font-weight: bold;
}
.announcement-divider {
  width: 100%;
  border-bottom: 2px dotted #ccc;
  margin: 24px 0;
}

.announcement-content {
  min-height: 120px;
  color: #222;
  line-height: 2;
  font-size: 1.1rem;
  margin-bottom: 0;
  transition: font-size 0.2s;
  width: 100%;
  text-align: left;
}
.announcement-content.large { font-size: 1.5rem; }
.announcement-content.medium { font-size: 1.1rem; }
.announcement-content.small { font-size: 0.95rem; }

.announcement-attach {
  width: 100%;
  margin-top: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.attach-title {
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 两端对齐 */
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
}
.attach-title-left {
  display: flex;
  align-items: center;
}
.attach-arrow {
  font-size: 1.1rem;
  margin-right: 6px;
  color: #222;
  transform: rotate(90deg);
}
.attach-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.attach-file {
  color: #409eff;
  font-size: 1rem;
  margin-left: 0;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}
.attach-file:hover {
  color: #66b1ff;
  text-decoration: underline;
}
/* 文件传阅弹窗 */
.circulate-btn {
  margin-left: 24px;
  padding: 4px 16px;
  border: none;
  background: #409eff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.circulate-btn:hover {
  background: #66b1ff;
}

.circulate-modal-mask {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.circulate-modal {
  background: #fff;
  border-radius: 12px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.circulate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 28px 10px 28px;
  border-bottom: 1px solid #f0f0f0;
}

.circulate-close {
  font-size: 24px;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
}

.circulate-search {
  padding: 12px 28px 0 28px;
}

.circulate-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d4d7de;
  border-radius: 6px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.circulate-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 8px 28px 0 28px;
}

.circulate-person {
  display: flex;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.2s;
}
.circulate-person:last-child {
  border-bottom: none;
}
.circulate-person:hover {
  background: #f6faff;
}
.person-avatar {
  width: 32px;
  height: 32px;
  background: #eaf4ff;
  color: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  margin-right: 12px;
}
.person-name {
  flex: 1;
  font-size: 16px;
  color: #222;
}
.person-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #bbb;
  border-radius: 50%;
  background: #fff;
  margin-left: 8px;
  position: relative;
  transition: border-color 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-radio.checked {
  border-color: #409eff;
  background: #409eff;
}
.person-radio.checked::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circulate-footer {
  padding: 16px 28px 18px 28px;
  display: flex;
  justify-content: flex-end;
  background: none;
}
.circulate-ok {
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 24px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.circulate-ok:hover {
  background: #66b1ff;
}
</style>
